<template>
  <div>
    <button @click="addCart">添加购物车</button>
  </div>
</template>

<script>
// 按需导入mapState函数，将所需数据映射为计算属性使用
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
    }
  },
  created () {
    // 一开始加载页面时，car是一个空数组  从localStorage中获取
    this.saveInCar()
  },
  methods: {
    ...mapMutations(['saveInCar']),
    // 点击'添加到购物车'按钮时触发 ,将当前商品id和购买数量添加到共享数据car数组中
    addCart () {
      console.log(this.car)
      const obj = {
        id: 78,
        count: 4
      }
      // 循环car数组，根据id，查询当前商品是否已经存在于car数组中
      const index = this.car.findIndex(item => {
        return item.id === obj.id
      })
      console.log(index)
      // 说明当前要添加的商品不存在于car数组中
      if (index === -1) {
        // 将当前商品添加到car数组中
        this.car.push(obj)
        // 同时，将car数组存储到localStorage中————防止关闭浏览器后数据消失
        window.localStorage.setItem('car', JSON.stringify(this.car))
      } else {
        // 说明当前要添加的商品已经存在于car数组中
        // 将car数组中对应数据的count属性值加1
        this.car[index].count++
        // 同时，将car数组存储到localStorage中————防止关闭浏览器后数据消失
        window.localStorage.setItem('car', JSON.stringify(this.car))
      }
    }
  },
  // 计算属性
  computed: {
    ...mapState(['car'])
  }
}
</script>
<style lang='less' scoped>

</style>
